<template>
  <div class="test">
    <div class="select">
      <el-button @click="handleClickExport">确认导出</el-button>
       <el-select v-model="value" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
  </el-select>
    </div>
    <div>
      <el-table
    :data="tableData"
    stripe
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import dayjs from "dayjs";
import { export_json_to_excel } from "@/vendor/Export2Excel.js";

 export default {
    data() {
      return {
        // 多选框
        options: [{
          value: '1',
          label: '导出本表'
        }, {
          value: '2',
          label: '导出全部'
        }],
        value: '1',
        // 表格
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 '
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 '
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 '
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 '
        }],
        // 多个sheet导出excel
        tableDataList:[
          [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 '
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 '
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 '
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 '
        }],
        [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 '
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 '
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 '
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 '
        }],
        [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 '
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 '
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 '
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 '
        }]
        ]
      }
    },
    methods:{
      // 后端返回二进制流的
     async getDomwBlobFile(name){
       let res = await axios({
          url:'http://192.168.8.232:8002/res/data/getResTemplate',
          method:'get',
          responseType:'blob'
        })
        console.log(res?.data);
          // 下载文件
          let blob;
          let fileName = "";
          if (res instanceof Blob) {
            blob = new Blob([res]);
            if (isALLFile && name) {
              fileName = name;
            } else {
              if (name) {
                fileName = `${name}.xlsx`;
              } else {
                fileName = `${dayjs().format("YYYY-MM-DD HH_mm_ss")}.xlsx`;
              }
            }
          } else {
            blob = new Blob([res.data]);
            // 从响应头中获取文件名称
            let fileNameResponse;
            const contentDisposition = res.headers["content-disposition"];
            if (contentDisposition) {
              // 正则获取filename的值
              const filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
              const matches = filenameRegex.exec(contentDisposition);
              if (matches != null && matches[1]) {
                fileNameResponse = matches[1].replace(/['"]/g, "");
                fileNameResponse = decodeURI(fileNameResponse);
              }
              fileName = fileNameResponse;
              console.log(fileNameResponse);
            } else {
              if (name) {
                fileName = `${name}.xlsx`;
              } else {
                fileName = `${dayjs().format("YYYY-MM-DD HH_mm_ss")}.xlsx`;
              }
            }
          }
          if ("download" in document.createElement("a")) {
            // 非IE下载
            const elink = document.createElement("a");
            elink.download = fileName;
            elink.style.display = "none";
            elink.href = URL.createObjectURL(blob);
            document.body.appendChild(elink);
            elink.click();
            URL.revokeObjectURL(elink.href); // 释放URL 对象
            document.body.removeChild(elink);
          } else {
            // IE10+下载
            (navigator).msSaveBlob(blob, fileName);
          }
      },
      // 后端返回连接(请求接口后拿到文件的链接)
      getDownFileExcel(fileUrl,fileName='测试excel'){
          let name = fileUrl.lastIndexOf(".");
          let suffix = fileUrl.substring(name);//截取后缀名
          if ("download" in document.createElement("a")) {
            // 非IE下载
            const elink = document.createElement("a");
            elink.download = fileName;
            elink.setAttribute("download", `${suffix}`);
            elink.style.display = "none";
            elink.href = url;
            document.body.appendChild(elink);
            elink.click();
            URL.revokeObjectURL(elink.href); // 释放URL 对象
            document.body.removeChild(elink);
          } else {
            // IE10+下载
            (navigator).msSaveBlob(blob, fileName);
          }
      },
      // 导出列表格式化数据的方法
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]));
      },
      // 前端生成excel
      generateExcel(){

        // 表头
        const tHeader = ["时间", "名称", "地址"];
        // table表格中对应的属性名
        const filterVal = ["date", "name", "address"];
        // 表格绑定数据转json
        const data = this.formatJson(filterVal, this.tableData);
        export_json_to_excel(
          tHeader,
          data,
          "测试数据" + new Date().toLocaleDateString()
        ); // 对应下载文件的名字

      },
      handleClickExport(){
        console.log('执行导出');
        this.generateExcel()
      }
  
    },
    created(){
      // this.getDomwBlobFile();
    }
  }
</script>

<style  scoped>
 .select {
  display: flex;
  justify-content:center;
  align-items: center;
  height: 60px;
  }
</style>
